<template>
  <!-- 专利列表 -->
  <el-row>
    <el-col :span="24">
      <h3 class="title">专利列表</h3>
      <ul class="tab-info-title clearfix">
        <li>
          <span>专利类型：</span>
          <span>
            <el-select
              v-model="na"
              size="medium"
              class="elselect"
              placeholder="专利类型">
              <el-option
                v-for="item in options.na"
                :key="item.name"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </span>
        </li>
        <li style="margin-right: 20px">
          <span>申请日：</span>
          <span>
            <el-date-picker
              v-model="apd"
              type="year"
              size="medium"
              value-format="yyyy"
              placeholder="申请日"
              prefix-icon="date-prefix"
              :clearable="false"
              class="picker">
            </el-date-picker>
          </span>
        </li>
        <li style="margin-right: 20px">
          <span>公开/公告日：</span>
          <span>
            <el-date-picker
              v-model="isd"
              type="year"
              size="medium"
              value-format="yyyy"
              placeholder="公开/公告日"
              prefix-icon="date-prefix"
              :clearable="false"
              class="picker">
            </el-date-picker>
          </span>
        </li>
        <li style="margin-right: 20px">
          <span>法律状态：</span>
          <span>
            <el-select
              v-model="ls"
              size="medium"
              class="elselect"
              placeholder="法律状态">
              <el-option
                v-for="item in options.ls"
                :key="item.name"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>IPC分类：</span>
          <span>
            <el-select
              v-model="icl"
              filterable
              remote
              size="medium"
              class="elselect"
              placeholder="IPC分类"
              :remote-method="remoteMethodIPC"
              :loading="loading">
              <el-option
                v-for="item in options.icl"
                :key="item.name"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <el-button type="primary" class="vtab-active" @click="reset">重置</el-button>
        </li>
      </ul>
      <div class="inp-box2">
        <el-input
          clearable
          class="search-bar-inp"
          popper-class="complete-list"
          v-model="keyword"
          placeholder="请输入检索的关键词"
          @keyup.enter.native="search"
        ></el-input>
        <el-button type="primary" class="vtab-active" @click="search">搜索</el-button>
      </div>
    </el-col>
    <el-col :span="24" v-loading="show">
      <!-- 列表 -->
      <ul class="disputes-list">
        <li v-for="(item, index) in listData" :key="index">
          <h3>
            <p>
              <router-link
                v-show="isTranslate[index] === 'false'"
                :to="{
                  name: 'TechnicalValuationDetail',
                  query: {
                    pn: item.pn,
                    active: 1,
                    name: $route.query.name,
                    eid: $route.query.eid,
                  },
                }"
                tag="span"
                v-html="item.ttl"
              ></router-link>
              <router-link
                v-show="isTranslate[index] === 'true'"
                :to="{
                  name: 'TechnicalValuationDetail',
                  query: {
                    pn: item.pn,
                    active: 1,
                    name: $route.query.name,
                    eid: $route.query.eid,
                  },
                }"
                tag="span">
                {{ item.transT }}
              </router-link>
              <i class="translation" @click="translation(item, index)">译</i>
            </p>
            <span class="score high">价值评分：
              <template v-if="item.pantentScore&&item.pantentScore>0">
                {{ item.pantentScore }}分
              </template>
              <template v-else>-</template>
            </span>
          </h3>
          <p class="clearfix">
            <span class="light">
              <a style="width: 50px; color: #95959f">申请号：</a>
              <a class="fontColor">{{ item.apn }}</a>
            </span>
            <span>申请日：{{ item.apd }}</span>
            <span class="light">
              <a style="width: 50px; color: #95959f">申请人：</a>
              <a class="fontColor" style="width: 80%">{{item.an && item.an.toString()}}</a>
            </span>
            <span>IPC：{{ item.ipc && item.ipc.toString() }}</span>
          </p>
          <p class="clearfix">
            <!-- <span>专利类型：<i>{{ item.patent_type }}</i></span> -->
            <span>公开日：{{ item.isd }}</span>
            <span class="light">
              <a style="width: 50px; color: #95959f">发明人：</a>
              <a class="fontColor" style="width: 80%">{{ item.in && item.in.toString() }}</a>
            </span>
            <span v-if="item.legal_status !== ''">法律状态：{{ item.lss }}</span>
          </p>
        </li>
      </ul>
      <div class="pagination">
        <el-pagination
          background
          :total="total"
          :page-size="ips"
          layout="prev, pager, next"
          :current-page="ipi"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <router-view></router-view>
    </el-col>
  </el-row>
</template>
<script>
import { xmlEscape } from "@/utils/utils";
export default {
  data() {
    return {
      companyName: this.$route.query.name || "",
      keyword: '',
      na: "",
      apd: "",
      isd: "",
      ls: "",
      icl: "",
      options: {
        na: [
          {name: '全部', value: ''},
          {name: '发明专利', value: '发明专利'},
          {name: '实用新型', value: '实用新型'},
          {name: '外观设计', value: '外观设计'},
          {name: '植物专利', value: '植物专利'},
        ],
        ls: [
          {name: '全部', value: ''},
          {name: '授权', value: '授权'},
          {name: '失效', value: '失效'},
          {name: '公开', value: '公开'},
          {name: '撤回', value: '撤回'},
          {name: '驳回', value: '驳回'},
        ],
        icl: []
      },
      total: 0,
      listData: [],
      ipi: 1,
      ips: 10,
      translationList: [],
      isTranslate: [],
      show: false,
      loading: false,
    };
  },
  mounted() {
    this.keyword = ''
    this.na = "";
    this.apd = "";
    this.isd = "";
    this.ls = "";
    this.icl = "";
    this.total = 0;
    this.show = false;
    this.loading = false;
    this.listData = [];
    this.ips = 10;
    this.ipi = 1;
    this.search();
  },
  methods: {
    init() {
    },
    remoteMethodIPC(query) {
      this.loading = true
      this.$nextTick(() => {
        this.loading = false
        if (query !== '') {
          this.$get(this.$Url.energyTechnology.getIPC, {
            keyword: query.toUpperCase()
          }).then(res => {
            let data = res.data
            let option = []
            data.forEach(v => {
              option.push({
                name: v,
                value: v
              })
            })
            this.$set(this.options, 'icl', option)
          }).catch(err => {})
        } else {
          this.$set(this.options, 'icl', [])
        }
      })
    },
    // 翻页
    handleCurrentChange(val) {
      this.ipi = val;
    },
    // 获取专利列表
    search() {
      let txt = ''
      let txtArr = []

      if (this.keyword !== '') {
        txtArr.push('B/' + this.keyword)
        // txt += 'B/' + this.keyword + ' and '
      }
      if (this.na !== '') {
        txtArr.push('NA/' + this.na)
        // txt += 'NA/' + this.na + ' and '
      }
      if (this.apd !== '') {
        txtArr.push('APD/' + this.apd)
        // txt += 'APD/' + this.apd + ' and '
      }
      if (this.isd !== '') {
        txtArr.push('ISD/' + this.isd)
        // txt += 'ISD/' + this.isd + ' and '
      }
      if (this.ls !== '') {
        txtArr.push('LS/' + this.ls)
        // txt += 'LS/' + this.ls + ' and '
      }
      if (this.icl !== '') {
        txtArr.push('IPC/' + this.icl)
        // txt += 'IPC/' + this.icl
      }
      txtArr = txtArr.join(' and ')
      this.$post(this.$Url.search.invoke, {
        sq: txtArr,
        ipi: this.ipi - 1,
        ips: this.ips,
      }).then(res => {
        let data = res.data
        if (data) {
          if (Object.keys(data.plist).length <= 0) {
            this.emptyText = '暂无数据'
          }
          this.isTranslate = []
          data.plist.forEach(v => {
            if (v.ttl) {
              v.ttl = xmlEscape(v.ttl)
            }
            this.isTranslate.push("false");
          })
          this.listData = data.plist
          this.listData.forEach((v, i) => {
            let ths = this;
            this.getPantentScoreCount(v.pn, function (data) {
              ths.$set(ths.listData[i], "pantentScore", data.data ? data.data : "0");
            });
          })
          this.total = data.total
        } else {
          this.emptyText = '暂无数据'
        }
      }).catch(err => {
        this.emptyText = '暂无数据'
      })
      return
      // console.log(arrNum,date)
      this.$post(this.$Url.patent.SingleCompany, {
        companyName: this.companyName,
        ipi: this.ipi,
        ips: this.ips,
        musts: arrNum,
        rang: date,
      })
        .then((data) => {
          this.show = false;
          let result = data.data && data.data.result || []
          result.forEach(v => {
            // this.$set(v, 'title', xmlEscape(v.title))
            v.title = xmlEscape(v.title)
          })
          this.listData = result
          this.isTranslate = [];
          for (let i = 0; i < this.listData.length; i++) {
            this.isTranslate.push("false");
          }

          this.total = data.data.page.totalRow || 0;
          for (let i = 0; i < this.listData.length; i++) {
            let p = this.listData[i].pn;
            let that = this;

            this.getPantentScoreCount(p, function (data) {
              that.$set(
                that.listData[i],
                "pantentScore",
                data.data ? data.data : "0"
              );
            });
          }
        })
        .catch((error) => {
          this.show = false;
          console.log(error);
        });
    },
    // 获取摘要
    getAbst(pn, fn) {
      this.$post(this.$Url.patent.abst, {
        iopt: 7,
        sf: "QueryAbst",
        spn: pn,
      })
        .then((data) => fn(data))
        .catch((err) => {
          console.log(err);
        });
    },
    // 重新获取分数
    getPantentScoreCount(p, fn) {
      this.$get(this.$Url.patent.pantentScoreCount, {
        pn: p,
      })
        .then((data) => fn(data))
        .catch((err) => {
          console.log(err);
        });
    },
    // 翻译
    translation(item, index) {
      let transT = this.listData[index].transT || "";
      if (transT !== "") {
        if (this.isTranslate[index] === "false") {
          this.$set(this.isTranslate, index, "true");
        } else {
          this.$set(this.isTranslate, index, "false");
        }
      } else if (transT === "") {
        let pro1 = this.translateFn(item.ttl);
        pro1.then((res) => {
          this.$set(this.listData[index], "transT", res);
          this.$set(this.isTranslate, index, "true");
        });
      }
    },
    translateFn(text) {
      let promise = new Promise((resolve, reject) => {
        this.$post(this.$Url.patent.translat, {
          text: text,
        })
          .then((data) => {
            let text = data.data.translation[0].translated[0].text || "";
            resolve(text);
          })
          .catch((err) => {
            reject(err);
          });
      });
      return promise;
    },
    // 重置
    reset() {
      if (
        this.na == "" &&
        this.apd == "" &&
        this.isd == "" &&
        this.ls == "" &&
        this.icl == ""
      ) {
        return;
      }
      this.na = "";
      this.apd = "";
      this.isd = "";
      this.ls = "";
      this.icl = "";
      this.total = 0;
      this.show = false;
      this.listData = [];
      this.ips = 10;
      this.ipi = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  background: #fff;
  text-align: left;
}
.vcard-title {
  position: relative;
  padding-top: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #241c75;
  i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 20px;
    margin-top: -8px;
    background-color: $mainColor;
  }
}
.tab-info-title {
  padding-left: 0;
  padding: 15px 20px 0;
  list-style: none;
  li {
    display: block;
    float: left;
    line-height: 40px;
    margin-right: 20px;
    margin-bottom: 15px;
    font-weight: 600;
    > span {
      display: inline-block;
    }
    > span:last-child {
      width: 150px;
    }
  }
  > span {
    display: inline-block;
  }
}
.picker {
  width: 100%;
}
.elselect {
  width: 100%;
}
.disputes-list {
  padding-left: 0;
  margin: 10px 20px;
  list-style: none;
  li {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e7e6ec;
    > p {
      width: 100%;
      margin-bottom: 8px;
      > span {
        float: left;
        display: block;
        margin-right: 1%;
        font-size: 12px;
        color: #95959f;
        &:nth-child(1) {
          width: 20%;
        }
        &:nth-child(2) {
          width: 16%;
        }
        &:nth-child(3) {
          width: 30%;
        }
        &:nth-child(4) {
          width: 120px;
        }
        > a {
          line-height: 20px;
          display: block;
          float: left;
        }
        .fontColor {
          color: #514caa;
        }
        i {
          font-style: normal;
        }
      }
    }
  }
  h3 {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 16px;
    color: #241c75;
    > p {
      position: relative;
      margin-right: 130px;
      color: #51505e;
      > span {
        vertical-align: middle;
        cursor: pointer;
      }
    }
    .score {
      position: absolute;
      top: 0;
      right: 0;
      padding: 4px 14px;
      border-radius: 4px;
      text-align: center;
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      color: #fff;
    }
  }
  .translation {
    padding: 2px 7px;
    margin-left: 10px;
    border: 1px solid #4f63c8;
    border-radius: 3px;
    vertical-align: middle;
    font-style: normal;
    font-size: 12px;
    color: $mainColor;
    background-color: #fff;
    cursor: pointer;
    &:hover {
      border-color: #241c75;
      color: #fff;
      background-color: #241c75;
    }
  }
}
.low {
  background-color: #c44b5c;
}
.high {
  background-color: #34ae9b !important;
}
.light {
  color: $mainColor !important;
}
.abstract {
  line-height: 26px;
  margin-top: 8px;
  font-size: 14px;
  word-wrap: break-word;
  word-break: break-all;
  color: #7674a3;
}
.align-center {
  text-align: center;
}
.pagination {
  text-align: center;
  padding-bottom: 20px;
}
.inp-box2 {
  position: relative;
  width: 100%;
  padding-bottom: 15px;
  border-bottom: 1px solid #e7e6ec;
}
.search-bar-inp {
  width: 440px;
  margin-left: 20px;
  margin-right: 20px;
  ::v-deep {
    .el-input__inner {
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>

